<template>
  <div class="detailed-orders-wrapper">
    <header class="detailed-orders-header">
      <span @click="$router.back()" class="back-btn">&lt;</span>
      <span>订单详情</span>
    </header>
    <div class="order-info" v-if="order">
      <div class="order-status">
        <span>{{ order.orderState | stateFilter }}</span>
      </div>
      <div class="order-business">
        <span>商家：{{ order.business.businessName }}</span>
      </div>
      <div class="order-time">
        下单时间：{{ order.orderDate }}
      </div>
      <div class="order-address">
        配送地址：{{ order.deliveryAddress.address }}
      </div>
      <div class="order-user">
        联系人：{{ order.deliveryAddress.contactName }}（{{ order.deliveryAddress.contactSex | sexFilter }}） {{ order.deliveryAddress.contactTel }}
      </div>
      <div class="order-list-title">订单商品</div>
      <ul class="order-food-list">
        <li v-for="item in order.list" :key="item.food.foodId">
          <img :src="item.food.foodImg" alt="菜品图片">
          <div class="food-info">
            <div class="food-name">{{ item.food.foodName }}</div>
            <div class="food-num">x{{ item.quantity }}</div>
            <div class="food-price">￥{{ item.his_price }}</div>
          </div>
        </li>
        <li class="food-price"> 配送费￥{{order.business.deliveryPrice}}</li>
      </ul>
      <div class="order-total">
        总价：<span class="total-price">￥{{ order.orderTotal }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailedOrders',
  data() {
    return {
      order: null
    }
  },
  created() {
    const orderId = this.$route.query.orderId;
    this.$axios.post('OrdersController/getOrdersById', this.$qs.stringify({
      orderId
    })).then(response => {
      this.order = response.data;
    }).catch(error => {
      console.error(error);
    });
  },
  filters: {
    stateFilter(val) {
      switch (val) {
        case 0: return '未支付';
        case 1: return '已支付';
        case 2: return '已完成';
        default: return '未知状态';
      }
    },
    sexFilter(val) {
      return val == 1 ? '先生' : '女士';
    }
  }
}
</script>

<style scoped>
.detailed-orders-wrapper {
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 16vw;
}
.detailed-orders-header {
  height: 12vw;
  background: #51b9fe;
  color: #fff;
  display: flex;
  align-items: center;
  font-size: 4.5vw;
  padding-left: 4vw;
  position: relative;
}
.back-btn {
  font-size: 6vw;
  margin-right: 4vw;
  cursor: pointer;
}
.order-info {
  background: #fff;
  margin: 4vw;
  border-radius: 2vw;
  padding: 4vw;
  box-shadow: 0 2px 8px #eee;
}
.order-status {
  font-size: 4vw;
  color: #51b9fe;
  margin-bottom: 2vw;
}
.order-business,
.order-time,
.order-address,
.order-user {
  font-size: 3.5vw;
  margin-bottom: 1.5vw;
  color: #333;
}
.order-list-title {
  font-size: 4vw;
  font-weight: bold;
  margin: 3vw 0 2vw 0;
}
.order-food-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2vw 0;
}
.order-food-list li {
  display: flex;
  align-items: center;
  margin-bottom: 2vw;
}
.order-food-list img {
  width: 10vw;
  height: 10vw;
  border-radius: 2vw;
  margin-right: 3vw;
}
.food-info {
  display: flex;
  flex-direction: column;
  font-size: 3.5vw;
}
.food-name {
  font-weight: bold;
  margin-bottom: 0.5vw;
}
.food-num,
.food-price {
  color: #888;
  font-size: 3vw;
}
.order-total {
  text-align: right;
  font-size: 4vw;
  margin-top: 2vw;
}
.total-price {
  color: #f90;
  font-weight: bold;
}
.loading {
  text-align: center;
  margin-top: 20vw;
  color: #888;
  font-size: 4vw;
}
</style>